@charset "utf-8";
.rightColorBar {
	width: 69px;
	height: 527px;
	float: right;
	background-color: #e5e5e5;
	border-left: #afafaf 1px solid;
}
.rightbarContainer {
	float: left;
	background-color: #f5f5f5;
	margin-top: 11px;
	height: 516px;
	width: 69px;
}
.topColorBox{
	width: 48px;
	height: 58px;
	margin-left: 10px;
	margin-top: 5px;
	float: left;
}
.swich_icon{
	width: 16px;
	height: 16px;
	float: left;
	background-image: url(../img/%E9%BB%91%E7%99%BD.png);
}
.switch_row {
	margin-left: 16px;
	width: 16px;
	height: 16px;
	float: left;
	background-image: url(../img/%E8%BD%AC%E6%8D%A2%E9%94%AE.png);
}
.secondColorBox {
	width: 31px;
	height: 31px;
	border: #000 solid 1px;
	float: right;
	margin-top: 10px;
	cursor: pointer;
}
#secondColor {
	width: 28px;
	height: 28px;
	border: #fff solid 1px;
	background-color: #fff;
}
.firstColorBox {
	width: 31px;
	height: 31px;
	border: #000 solid 1px;
	float: left;
	margin-top: -43px;
}
#firstColor {
	width: 29px;
	height: 29px;
	border: #fff solid 1px;
	background-color: #000;
	cursor: pointer;
}
#colorCellContainer {
	width: 66px;
	height: 220px;
	float: left;
	margin-left: 2px;
	margin-top: 5px;
}
.colorCellBorder {
	width: 19px;
	height: 19px;
	border: #afafaf 1px solid;
	float: left;
	margin-left: 1px;
	margin-top: 1px;
	cursor: pointer;
}
.colorCell {
	width: 15px;
	height: 15px;
	border: #fff solid 2px;
	float: left;
}
#color1 {
	background-color: #ff0000;
}
#color2 {
	background-color: #ffffff;
}
#color3 {
	background-color: #00ff00;
}
#color4 {
	background-color: #0000ff;
}
#color5 {
	background-color: #ff00ff;
}
#color6 {
	background-color: #00ffff;
}
#color7 {
	background-color: #ffff00;
}
#color8 {
	background-color: #000000;
}
#color9 {
	background-color: #70db93;
}
#color10 {
	background-color: #5c3317;
}
#color11 {
	background-color: #9f5f9f;
}
#color12 {
	background-color: #b5a642;
}
#color13 {
	background-color: #d9d919;
}
#color14 {
	background-color: #a67d3d;
}
#color15 {
	background-color: #8c7853;
}
#color16 {
	background-color: #a67d3d;
}
#color17 {
	background-color: #5f9f9f;
}
#color18 {
	background-color: #d98719;
}
#color19 {
	background-color: #b87333;
}
#color20 {
	background-color: #ff7f00;
}
#color21 {
	background-color: #42426f;
}
#color22 {
	background-color: #5c4033;
}
#color23 {
	background-color: #2f4f2f;
}
#color24 {
	background-color: #4a766e;
}
#color25 {
	background-color: #4f4f2f;
}
#color26 {
	background-color: #9932cd;
}
#color27 {
	background-color: #871f78;
}
#color28 {
	background-color: #6b238e;
}
#color29 {
	background-color: #2f4f4f;
}
#color30 {
	background-color: #97694f;
}
#shapeContainer {
	float: left;
	width: 61px;
	border: #000 1px solid;
	height: 187px;
	margin-left: 3px;
	margin-top: 10px;
}
.shapeButtonBox {
	width: 24px;
	height: 24px;
	margin-left: 4px;
	margin-top: 2px;
	float: left;
	cursor: pointer;
}
#Line{
	background-image: url(../img/shapes/xiexian-01.svg);
}
#Bezier {
	background-image: url(../img/shapes/ziyouxian-01.svg);
}
#Ellipse {
	background-image: url(../img/ellipse.png);
}
#Wujiaoxing {
	background-image: url(../img/shapes/wujiaoxing-01.svg);
}
#RoundRect {
	background-image: url(../img/shapes/yuanjiaojuxing-01.svg);
}
#Rectangle {
	background-image: url(../img/shapes/juxing-01.svg);
}
#Duobianxing {
	background-image: url(../img/shapes/duobianxing-01.svg);
}
#Duihuakuang {
	background-image: url(../img/shapes/duihuakuang-01.svg);
}
#Baozha {
	background-image: url(../img/shapes/baozha-01.svg);
}
#Zhexian {
	background-image: url(../img/shapes/zhexian-01.svg);
}
#Triangle{
	background-image: url(../img/shapes/sanjiaoxing-01.svg);
}